import React, {Component} from 'react'
import {Platform, StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native'
import ViewUtil from '../../util/ViewUtil'
import MinaStyle from '../../assets/css/commonStyle.js'
import MinaIcon from '../../components/MinaIcon.js'
import NavigationBar from '../../components/NavigationBar.js'
import {MORE_MENU} from "../../components/myself/MoreMenu.js"
import NavigationUtil from '../../navigator/NavigationUtil.js'
import MyInfoComponent from './myInfo/MyInfoComponent.js'
import MyOrderComponent from './myOrder/MyOrderComponent.js'

type Props = {};
export default class Home extends Component<Props> {
	getItem(menu) {
    return ViewUtil.getMenuItem(() => this.goPage(menu), menu, '#3E73FF');
  }
  goPage(menu) {
    switch(menu){
      case MORE_MENU.integral_record :
          NavigationUtil.goPage({navigation: this.props.navigation}, 'IntegralRecord');
        break;
      case MORE_MENU.Custom_Theme :
        NavigationUtil.goPage({navigation: this.props.navigation}, 'CustomTheme');
        break;
      default:
        console.log(2)
        break;
    }
  }
  goToSystemSet(){
    NavigationUtil.goPage({
      navigation: this.props.navigation
    }, 'SystemSet');
  }
  renderNavigationBar(){
    let statusBar = {
      barStyle: 'light-content',
      backgroundColor: '#3E73FF',
    };
    let rightButton = <TouchableOpacity
      underlayColor={'transparent'}
      onPress={() => {this.goToSystemSet()}}>
    </TouchableOpacity>
    let navigationBar = <NavigationBar
      title={'我的'}
      statusBar={statusBar}
      rightButton={rightButton}
      style={{backgroundColor: '#fff'}}
    />;
    return navigationBar;
  }
  render() {
    return (
      <View style={MinaStyle.minaContainer}>
        {this.renderNavigationBar()}
        <ScrollView>
          <MyInfoComponent/>
          <MyOrderComponent/>
          <View style={MinaStyle.minaCell}>
            {this.getItem(MORE_MENU.integral_record)}
          </View>
          <View style={MinaStyle.minaCell}>
            {this.getItem(MORE_MENU.coupon)}
          </View>
          <View style={MinaStyle.minaCell}>
            {this.getItem(MORE_MENU.leave_record)}
          </View>
          <View style={MinaStyle.minaCell}>
            {this.getItem(MORE_MENU.my_growth_record)}
          </View>
          <View style={MinaStyle.minaCell}>
            {this.getItem(MORE_MENU.pay_record)}
          </View>
          <View style={MinaStyle.minaCell}>
            {this.getItem(MORE_MENU.notice)}
          </View>
          <View style={MinaStyle.minaCell}>
            {this.getItem(MORE_MENU.face_recognition)}
          </View>
          <View style={MinaStyle.minaCell}>
            {this.getItem(MORE_MENU.invite_join)}
          </View>
          <View style={MinaStyle.minaCell}>
            {this.getItem(MORE_MENU.Custom_Theme)}
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
	groupTitle: {
    marginLeft: 10,
    marginTop: 10,
    marginBottom: 5,
    fontSize: 12,
    color: 'gray'
  }
});